<template>
    <div style=" max-width: 1000px; min-width: 300px; ">
        <h3>固定首列和末列的表格（中间可滑动）</h3>

        <t-table ref="tableRef" row-key="id" :data="data" :columns="columns" table-layout="fixed" bordered hover>
            <template #op="{ row }">
                <t-link theme="primary" @click="onView(row)">查看</t-link>
            </template>
        </t-table>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 表格数据类型
interface RowData {
    id: number;
    name: string;
    email: string;
    phone: string;
    company: string;
    address: string;
    story: string;
}

// 模拟数据
const data = ref<RowData[]>([
    {
        id: 1,
        name: '张三丰',
        email: 'zhang.sanfeng@wudang.com',
        phone: '138-0000-0001',
        company: '武当科技有限公司',
        address: '湖北省武当山紫霄宫100号',
        story: '武当山的创始人，也是中国历史上最伟大的军事家、政治家和文学家。',
    },
    {
        id: 2,
        name: '李逍遥',
        email: 'li.xiaoyao@shu.com',
        phone: '138-0000-0002',
        company: '蜀山信息技术部',
        address: '四川省峨眉山仙剑谷202号',
        story: '蜀山信息技术部的创始人，也是中国历史上最伟大的军事家、政治家和文学家。',
    },
    {
        id: 3,
        name: '赵灵儿',
        email: 'zhao.linger@miaoyin.com',
        phone: '138-0000-0003',
        company: '南诏国数字传媒',
        address: '云南省大理古城灵儿巷303号',
        story: '南诏国数字传媒的创始人，也是中国历史上最伟大的军事家、政治家和文学家。',
    },
    {
        id: 4,
        name: '王语嫣',
        email: 'wang.yuyan@wudang.com',
        phone: '138-0000-0004',
        company: '武当科技有限公司',
        address: '湖北省武当山紫霄宫100号',
        story: '武当山的创始人，也是中国历史上最伟大的军事家、政治家和文学家。',
    },
    {
        id: 5,
        name: '王语嫣',
        email: 'wang.yuyan@wudang.com',
        phone: '138-0000-0005',
        company: '武当科技有限公司',
        address: '湖北省武当山紫霄宫100号',
        story: '武当山的创始人，也是中国历史上最伟大的军事家、政治家和文学家。',
    },
    {
        id: 6,
        name: '王语嫣',
        email: 'wang.yuyan@wudang.com',
        phone: '138-0000-0006',
        company: '武当科技有限公司',
        address: '湖北省武当山紫霄宫100号',
        story: '武当山的创始人，也是中国历史上最伟大的军事家、政治家和文学家。',
    },
]);

// 列配置：首列左固定，末列右固定，中间列正常
const columns = [
    {
        colKey: 'name',
        title: '姓名',
        width: 100,
        fixed: 'left' as const, // 固定左侧
        ellipsis: true,         // 超出显示 ...
    },
    {
        colKey: 'email',
        title: '邮箱',
        width: 180,
        ellipsis: true,
    },
    {
        colKey: 'story',
        title: '故事',
        width: 200,
        ellipsis: true,
    },
    {
        colKey: 'phone',
        title: '电话',
        width: 150,
        ellipsis: true,
    },
    {
        colKey: 'company',
        title: '公司',
        width: 200,
        ellipsis: true,
    },
    {
        colKey: 'address',
        title: '地址',
        width: 220,

        ellipsis: true,
    },
    {
        colKey: 'op',
        title: '操作',
        width: 100,
        fixed: 'right' as const, // 固定右侧
        ellipsis: true,
    },
];

// 查看操作
const onView = (row: RowData) => {
    console.log('查看:', row);
};
</script>

<style scoped>
/* 确保单元格不换行，超出显示 ... */
.fixed-first-last-column :deep(.t-table__cell-nowrap) {
    white-space: nowrap;
}

.fixed-first-last-column :deep(.t-table__cell) {
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>